<template>
 <div class="continer">
                        <div class="up">
                            <div class="left">
                                <div ref="myChart" :style="{ width: '100%', height: '300px' }"></div>
                            </div>
                            <div class="right">
                                <div ref="myChart2" :style="{ width: '100%', height: '300px' }"></div>
                            </div>
                        </div>
                        <div class="down">
                            <div ref="myChart3" :style="{ width: '100%', height: '300px' }"></div>
                        </div>
                    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { classRatio, nearTM, todayVolume } from "@/api/ChartApi";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src



const myChart = ref<any>();  //也可以用const myChart = ref<any>(); 
const myChart2 = ref<any>();
const myChart3 = ref<any>();

const myCharts = ref<any>();
const myCharts2 = ref<any>();
const myCharts3 = ref<any>();


onMounted(() => {

    todayVolume().then(res => {
        // 绘制图表
        myCharts.value = echarts.init(myChart.value);
        // 绘制图表
        myCharts.value.setOption({
            title: {
                text: '今日销量'
            },
            tooltip: {},
            xAxis: {
                name: '种类',
                data: res.data.data.className
            },
            yAxis: {
                name: '金额',
                axisLabel: {
                    formatter: '{value} 本',
                    align: 'center'
                    // ...
                }
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: res.data.data.num
                }
            ]
        });
    })



    classRatio().then(res => {

        myCharts2.value = echarts.init(myChart2.value);
    // 绘制图表
    myCharts2.value.setOption({
        title: {
            text: '各类占比'
        },
        tooltip: {},
        series: [
            {
                type: 'pie',
                data: res.data.data
            }
        ]
    });
    })



nearTM().then(res => {
    myCharts3.value = echarts.init(myChart3.value,);
    // 绘制图表
    myCharts3.value.setOption({
        title: {
            text: '近12个月销量'
        },
        xAxis: {
            type: 'category',
            data: res.data.data.names
        },
        yAxis: {
            name: '金额',
            type: 'value',
            axisLabel: {
                formatter: '{value} 元',
                align: 'center'
                // ...
            }
        },
        tooltip: {},
        series: [
            {
                name: '销售额',
                data: res.data.data.values,
                type: 'line'
            }
        ]
    });
})




});



</script>

<style scoped >
.continer {
    display: flex;
    flex-direction: column;
    margin-top: 50px;

}

.up {
    display: flex;
    justify-content: space-between;
}

.left {
    width: 40%;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
}

.right {
    width: 40%;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
}

.down {
    margin-top: 120px;
    background-color: rgb(255, 255, 255);
    padding-left: 10%;
    border-radius: 10px;
}
</style>